<script lang="ts" setup>
import { h, onMounted, reactive, ref } from 'vue';

import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import {
  Alert,
  Button,
  Card,
  Checkbox,
  Col,
  Form,
  Input,
  message,
  Modal,
  Row,
  Select,
  Space,
  Spin,
  Table,
  Tag,
} from 'ant-design-vue';

import {
  applyTemplateToResources,
  createResourceTemplate,
  createTemplateVersion,
  deleteResourceTemplate,
  getAvailableResources,
  getResourceTemplates,
  getTemplateUsage,
  getTemplateVersions,
  rollbackTemplateVersion,
  updateResourceTemplate,
} from '#/api/resource-center';

import TemplateUsageGuide from '../guides/TemplateUsageGuide.vue';

const loading = ref(false);
const templateList = ref([]);
const formVisible = ref(false);
const formRef = ref();
const selectedRowKeys = ref<string[]>([]);

// 版本管理相关
const versionModalVisible = ref(false);
const currentTemplate = ref<any>(null);
const templateVersions = ref<any[]>([]);
const versionLoading = ref(false);

// 应用管理相关
const applyModalVisible = ref(false);
const templateUsage = ref<any>(null);
const usageLoading = ref(false);
const selectedResources = ref<string[]>([]);
const availableResources = ref<any[]>([]);

// 帮助指南相关
const templateGuideVisible = ref(false);

const searchForm = reactive({
  keyword: '',
  templateType: '',
  status: '',
});

const formData = reactive({
  id: '',
  name: '',
  code: '',
  templateType: '',
  description: '',
  version: '1.0.0',
});

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条记录`,
});

// 模板类型选项
const templateTypeOptions = [
  { label: '物理资源', value: 'PHYSICAL' },
  { label: '技术资源', value: 'TECHNICAL' },
];

// 状态选项
const statusOptions = [
  { label: '启用', value: 'ACTIVE' },
  { label: '禁用', value: 'INACTIVE' },
];

// 表格列定义
const columns = [
  {
    title: '模板名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
  },
  {
    title: '模板编码',
    dataIndex: 'code',
    key: 'code',
    width: 180,
  },
  {
    title: '模板类型',
    dataIndex: 'templateType',
    key: 'templateType',
    width: 120,
  },
  {
    title: '版本',
    dataIndex: 'version',
    key: 'version',
    width: 100,
  },
  {
    title: '资源数量',
    dataIndex: 'resourceCount',
    key: 'resourceCount',
    width: 100,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 180,
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    fixed: 'right' as const,
  },
];

// 加载数据
const loadData = async () => {
  loading.value = true;
  try {
    const params = {
      page: pagination.current,
      pageSize: pagination.pageSize,
      keyword: searchForm.keyword,
      templateType: searchForm.templateType,
      status: searchForm.status,
    };

    const response = await getResourceTemplates(params);
    templateList.value = response.data?.items || response.items || [];
    pagination.total = response.data?.total || response.total || 0;
  } catch (error) {
    console.error('加载模板数据失败:', error);
    message.error('加载数据失败');
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  pagination.current = 1;
  loadData();
};

// 重置搜索
const resetSearch = () => {
  Object.assign(searchForm, {
    keyword: '',
    templateType: '',
    status: '',
  });
  pagination.current = 1;
  loadData();
};

// 分页变化
const handleTableChange = (pag: any) => {
  pagination.current = pag.current;
  pagination.pageSize = pag.pageSize;
  loadData();
};

// 新增模板
const addTemplate = () => {
  Object.assign(formData, {
    id: '',
    name: '',
    code: '',
    templateType: '',
    description: '',
    version: '1.0.0',
  });
  formVisible.value = true;
};

// 编辑模板
const editTemplate = (record: any) => {
  Object.assign(formData, record);
  formVisible.value = true;
};

// 删除模板
const deleteTemplate = async (id: string) => {
  Modal.confirm({
    title: '确认删除',
    content: '确定要删除这个模板吗？',
    onOk: async () => {
      try {
        await deleteResourceTemplate(id);
        message.success('删除成功');
        loadData();
      } catch (error) {
        console.error('删除失败:', error);
        message.error('删除失败');
      }
    },
  });
};

// 提交表单
const submitForm = async () => {
  try {
    await formRef.value.validate();

    if (formData.id) {
      // 更新模板
      await updateResourceTemplate(formData.id, formData);
      message.success('更新成功');
    } else {
      // 创建模板
      await createResourceTemplate(formData);
      message.success('创建成功');
    }

    formVisible.value = false;
    loadData();
  } catch (error) {
    console.error('提交失败:', error);
    message.error('提交失败');
  }
};

// 选择变化
const onSelectionChange = (keys: any[]) => {
  selectedRowKeys.value = keys as string[];
};

// 批量删除
const batchDelete = async () => {
  if (selectedRowKeys.value.length === 0) {
    message.warning('请选择要删除的模板');
    return;
  }

  Modal.confirm({
    title: '确认批量删除',
    content: `确定要删除选中的 ${selectedRowKeys.value.length} 个模板吗？`,
    onOk: async () => {
      try {
        // 模拟批量删除
        await Promise.all(
          selectedRowKeys.value.map((id) => deleteResourceTemplate(id)),
        );
        message.success('批量删除成功');
        selectedRowKeys.value = [];
        loadData();
      } catch (error) {
        console.error('批量删除失败:', error);
        message.error('批量删除失败');
      }
    },
  });
};

// 模板预览
const previewTemplate = (record: any) => {
  Modal.info({
    title: `模板预览 - ${record.name}`,
    width: 800,
    content: h('div', [
      h('div', { style: 'margin-bottom: 16px;' }, [
        h('strong', '模板信息：'),
        h('p', `名称：${record.name}`),
        h('p', `编码：${record.code}`),
        h(
          'p',
          `类型：${record.templateType === 'PHYSICAL' ? '物理资源' : '技术资源'}`,
        ),
        h('p', `版本：${record.version}`),
        h('p', `描述：${record.description}`),
      ]),
      h('div', { style: 'margin-bottom: 16px;' }, [
        h('strong', '使用统计：'),
        h('p', `资源数量：${record.resourceCount}`),
        h('p', `创建时间：${record.createTime}`),
        h('p', `更新时间：${record.updateTime}`),
      ]),
    ]),
  });
};

// 复制模板
const copyTemplate = async (record: any) => {
  try {
    const copyData = {
      ...record,
      id: '',
      name: `${record.name}_副本`,
      code: `${record.code}_COPY`,
      createTime: '',
      updateTime: '',
    };

    await createResourceTemplate(copyData);
    message.success('复制成功');
    loadData();
  } catch (error) {
    console.error('复制失败:', error);
    message.error('复制失败');
  }
};

// 显示模板帮助
const showTemplateHelp = () => {
  Modal.info({
    title: '📖 资源模板使用指南',
    width: 800,
    content: h('div', [
      h('div', { style: 'margin-bottom: 20px;' }, [
        h('h4', '🎯 模板的作用'),
        h(
          'p',
          '资源模板是预定义的资源配置方案，用于快速创建和管理相似类型的资源。',
        ),
        h('ul', [
          h('li', '标准化资源属性配置'),
          h('li', '快速批量创建资源'),
          h('li', '确保资源配置的一致性'),
          h('li', '简化资源管理流程'),
        ]),
      ]),
      h('div', { style: 'margin-bottom: 20px;' }, [
        h('h4', '🔄 与其他模块的关联'),
        h('p', '模板可以与其他模块配合使用：'),
        h('ul', [
          h('li', '在资源分类管理中，模板可以关联到特定分类'),
          h('li', '在调度规则管理中，模板可以预设调度规则'),
          h('li', '在资源创建时，可以选择对应的模板快速配置'),
        ]),
      ]),
      h('div', { style: 'margin-bottom: 20px;' }, [
        h('h4', '💡 最佳实践'),
        h('ul', [
          h('li', '为每个业务场景创建专门的模板'),
          h('li', '使用版本管理功能跟踪模板变更'),
          h('li', '定期复制和更新模板以适应业务发展'),
          h('li', '模板名称使用业务场景描述，编码使用英文大写字母'),
        ]),
      ]),
      h('div', [
        h('h4', '🚀 快速开始'),
        h('ol', [
          h('li', '点击"新增模板"创建模板'),
          h('li', '配置模板类型和属性'),
          h('li', '在资源创建时选择对应模板'),
          h('li', '使用"复制"功能快速创建相似模板'),
        ]),
      ]),
    ]),
  });
};

// 显示使用示例
const showUsageExamples = () => {
  templateGuideVisible.value = true;
};

// 版本管理功能
const openVersionManager = async (record: any) => {
  currentTemplate.value = record;
  versionModalVisible.value = true;
  await loadTemplateVersions(record.id);
};

const loadTemplateVersions = async (templateId: string) => {
  versionLoading.value = true;
  try {
    const response = await getTemplateVersions(templateId);
    templateVersions.value = response.data?.items || response.items || [];
  } catch (error) {
    console.error('加载模板版本失败:', error);
    message.error('加载版本数据失败');
  } finally {
    versionLoading.value = false;
  }
};

const createNewVersion = async () => {
  try {
    const newVersion = {
      version: `${currentTemplate.value.version.split('.')[0]}.${Number(currentTemplate.value.version.split('.')[1]) + 1}.0`,
      description: '新版本',
      changes: '模板配置更新',
    };

    await createTemplateVersion(currentTemplate.value.id, newVersion);
    message.success('创建新版本成功');
    await loadTemplateVersions(currentTemplate.value.id);
  } catch (error) {
    console.error('创建新版本失败:', error);
    message.error('创建新版本失败');
  }
};

const rollbackVersion = async (versionId: string) => {
  Modal.confirm({
    title: '确认回滚',
    content: '确定要回滚到这个版本吗？当前版本将被覆盖。',
    onOk: async () => {
      try {
        await rollbackTemplateVersion(currentTemplate.value.id, versionId);
        message.success('版本回滚成功');
        await loadTemplateVersions(currentTemplate.value.id);
      } catch (error) {
        console.error('版本回滚失败:', error);
        message.error('版本回滚失败');
      }
    },
  });
};

// 应用管理功能
const openApplyManager = async (record: any) => {
  currentTemplate.value = record;
  applyModalVisible.value = true;
  selectedResources.value = [];
  await loadTemplateUsage(record.id);
  await loadAvailableResources();
};

const loadTemplateUsage = async (templateId: string) => {
  usageLoading.value = true;
  try {
    const response = await getTemplateUsage(templateId);
    templateUsage.value = response.data?.data || response.data || {};
  } catch (error) {
    console.error('加载模板使用情况失败:', error);
    message.error('加载使用情况失败');
  } finally {
    usageLoading.value = false;
  }
};

const loadAvailableResources = async () => {
  try {
    const response = await getAvailableResources();
    availableResources.value = response.data?.items || response.items || [];
  } catch (error) {
    console.error('加载可用资源失败:', error);
    message.error('加载可用资源失败');
  }
};

const applyTemplateToSelectedResources = async () => {
  if (selectedResources.value.length === 0) {
    message.warning('请选择要应用模板的资源');
    return;
  }

  try {
    await applyTemplateToResources(
      currentTemplate.value.id,
      selectedResources.value,
    );
    message.success('应用模板成功');
    selectedResources.value = [];
    await loadTemplateUsage(currentTemplate.value.id);
    await loadAvailableResources();
  } catch (error) {
    console.error('应用模板失败:', error);
    message.error('应用模板失败');
  }
};

onMounted(() => {
  loadData();
});
</script>

<template>
  <div class="resource-templates">
    <Page title="资源模板" subtitle="配置和管理资源模板">
      <!-- 快速提示卡片 -->
      <Card :bordered="false" style="margin-bottom: 16px">
        <div class="quick-tips">
          <div class="tips-header">
            <IconifyIcon icon="mdi:lightbulb" class="tips-icon" />
            <span class="tips-title">💡 快速提示</span>
            <Button type="link" size="small" @click="showTemplateHelp">
              查看详细指南
            </Button>
          </div>
          <div class="tips-content">
            <div class="tip-brief">
              <strong>资源模板</strong
              >是预定义的资源配置方案，用于快速创建和管理相似类型的资源。
              支持版本管理、批量应用，可与分类管理和调度规则配合使用。
            </div>
            <div class="tip-actions">
              <Button type="primary" size="small" @click="addTemplate">
                <IconifyIcon icon="mdi:plus" />
                创建模板
              </Button>
              <Button size="small" @click="showUsageExamples">
                <IconifyIcon icon="mdi:eye" />
                查看示例
              </Button>
            </div>
          </div>
        </div>
      </Card>
      <!-- 搜索区域 -->
      <Card title="搜索条件" :bordered="false" style="margin-bottom: 16px">
        <Row :gutter="16">
          <Col :span="6">
            <Form.Item label="关键词">
              <Input
                v-model="searchForm.keyword"
                placeholder="请输入模板名称或编码"
                allow-clear
              />
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item label="模板类型">
              <Select
                v-model:value="searchForm.templateType"
                placeholder="请选择模板类型"
                allow-clear
                :options="templateTypeOptions"
              />
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item label="状态">
              <Select
                v-model:value="searchForm.status"
                placeholder="请选择状态"
                allow-clear
                :options="statusOptions"
              />
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item label="操作">
              <Space>
                <Button type="primary" @click="handleSearch">
                  <IconifyIcon icon="mdi:magnify" />
                  搜索
                </Button>
                <Button @click="resetSearch">
                  <IconifyIcon icon="mdi:refresh" />
                  重置
                </Button>
              </Space>
            </Form.Item>
          </Col>
        </Row>
      </Card>

      <!-- 数据表格 -->
      <Card title="模板列表" :bordered="false">
        <div class="table-toolbar">
          <Space>
            <Button type="primary" @click="addTemplate">
              <IconifyIcon icon="mdi:plus" />
              新增模板
            </Button>
            <Button
              :disabled="selectedRowKeys.length === 0"
              @click="batchDelete"
            >
              <IconifyIcon icon="mdi:delete" />
              批量删除
            </Button>
            <Button @click="showTemplateHelp">
              <IconifyIcon icon="mdi:help-circle" />
              使用帮助
            </Button>
          </Space>
        </div>

        <Table
          :columns="columns"
          :data-source="templateList"
          :loading="loading"
          :pagination="pagination"
          :row-selection="{
            selectedRowKeys,
            onChange: onSelectionChange,
          }"
          :row-key="(record) => record.id"
          @change="handleTableChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'templateType'">
              <Tag
                :color="record.templateType === 'PHYSICAL' ? 'blue' : 'green'"
              >
                {{
                  record.templateType === 'PHYSICAL' ? '物理资源' : '技术资源'
                }}
              </Tag>
            </template>
            <template v-else-if="column.key === 'status'">
              <Tag :color="record.status === 'ACTIVE' ? 'green' : 'red'">
                {{ record.status === 'ACTIVE' ? '启用' : '禁用' }}
              </Tag>
            </template>
            <template v-else-if="column.key === 'action'">
              <Space>
                <Button type="link" size="small" @click="editTemplate(record)">
                  编辑
                </Button>
                <Button
                  type="link"
                  size="small"
                  @click="openVersionManager(record)"
                >
                  版本
                </Button>
                <Button
                  type="link"
                  size="small"
                  @click="openApplyManager(record)"
                >
                  应用
                </Button>
                <Button
                  type="link"
                  size="small"
                  @click="previewTemplate(record)"
                >
                  预览
                </Button>
                <Button type="link" size="small" @click="copyTemplate(record)">
                  复制
                </Button>
                <Button
                  type="link"
                  size="small"
                  danger
                  @click="deleteTemplate(record.id)"
                >
                  删除
                </Button>
              </Space>
            </template>
          </template>
        </Table>
      </Card>

      <!-- 表单弹窗 -->
      <Modal
        v-model:open="formVisible"
        :title="formData.id ? '编辑模板' : '新增模板'"
        width="600px"
        @ok="submitForm"
      >
        <Form
          ref="formRef"
          :model="formData"
          :rules="{
            name: [{ required: true, message: '请输入模板名称' }],
            code: [{ required: true, message: '请输入模板编码' }],
            templateType: [{ required: true, message: '请选择模板类型' }],
          }"
          layout="vertical"
        >
          <div class="form-help">
            <Alert
              message="💡 模板创建提示"
              description="模板名称建议使用业务场景描述，如：标准客房、VIP套房、温泉池等。模板编码建议使用英文大写字母和下划线，如：STANDARD_ROOM、VIP_SUITE等。"
              type="info"
              show-icon
              style="margin-bottom: 16px"
            />
          </div>
          <Row :gutter="16">
            <Col :span="12">
              <Form.Item label="模板名称" name="name">
                <Input
                  v-model:value="formData.name"
                  placeholder="请输入模板名称"
                />
              </Form.Item>
            </Col>
            <Col :span="12">
              <Form.Item label="模板编码" name="code">
                <Input
                  v-model:value="formData.code"
                  placeholder="请输入模板编码"
                />
              </Form.Item>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col :span="12">
              <Form.Item label="模板类型" name="templateType">
                <Select
                  v-model:value="formData.templateType"
                  placeholder="请选择模板类型"
                  :options="templateTypeOptions"
                />
                <div class="field-help">
                  <small>
                    <strong>物理资源：</strong
                    >酒店客房、温泉池、餐厅包间等实体资源<br />
                    <strong>技术资源：</strong
                    >表单模板、报表模板、API接口等虚拟资源
                  </small>
                </div>
              </Form.Item>
            </Col>
            <Col :span="12">
              <Form.Item label="版本" name="version">
                <Input
                  v-model:value="formData.version"
                  placeholder="请输入版本号"
                />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item label="描述" name="description">
            <Input.TextArea
              v-model:value="formData.description"
              placeholder="请输入模板描述"
              :rows="3"
            />
          </Form.Item>
        </Form>
      </Modal>

      <!-- 版本管理弹窗 -->
      <Modal
        v-model:open="versionModalVisible"
        :title="`版本管理 - ${currentTemplate?.name || ''}`"
        width="800px"
        :footer="null"
      >
        <div class="version-manager">
          <div class="version-header">
            <Space>
              <Button type="primary" @click="createNewVersion">
                <IconifyIcon icon="mdi:plus" />
                创建新版本
              </Button>
              <span class="current-version">
                当前版本：{{ currentTemplate?.version }}
              </span>
            </Space>
          </div>

          <div class="version-list">
            <div v-if="versionLoading" class="loading">
              <Spin />
            </div>
            <div v-else-if="templateVersions.length === 0" class="empty">
              暂无版本记录
            </div>
            <div v-else class="version-items">
              <div
                v-for="version in templateVersions"
                :key="version.id"
                class="version-item"
              >
                <div class="version-info">
                  <div class="version-header">
                    <span class="version-number">v{{ version.version }}</span>
                    <Tag
                      :color="version.status === 'ACTIVE' ? 'green' : 'default'"
                    >
                      {{
                        version.status === 'ACTIVE' ? '当前版本' : '历史版本'
                      }}
                    </Tag>
                  </div>
                  <div class="version-description">
                    {{ version.description }}
                  </div>
                  <div class="version-changes">{{ version.changes }}</div>
                  <div class="version-meta">
                    <span>创建时间：{{ version.createTime }}</span>
                    <span>创建人：{{ version.createBy }}</span>
                  </div>
                </div>
                <div class="version-actions">
                  <Button
                    v-if="version.status !== 'ACTIVE'"
                    type="link"
                    size="small"
                    @click="rollbackVersion(version.id)"
                  >
                    回滚到此版本
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Modal>

      <!-- 应用管理弹窗 -->
      <Modal
        v-model:open="applyModalVisible"
        :title="`应用管理 - ${currentTemplate?.name || ''}`"
        width="1000px"
        :footer="null"
      >
        <div class="apply-manager">
          <Row :gutter="16">
            <!-- 左侧：使用情况统计 -->
            <Col :span="12">
              <Card title="使用情况统计" :bordered="false">
                <div v-if="usageLoading" class="loading">
                  <Spin />
                </div>
                <div v-else-if="templateUsage" class="usage-stats">
                  <div class="stat-item">
                    <div class="stat-number">
                      {{ templateUsage.totalResources }}
                    </div>
                    <div class="stat-label">总资源数</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-number">
                      {{ templateUsage.activeResources }}
                    </div>
                    <div class="stat-label">活跃资源</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-number">
                      {{ templateUsage.usageRate }}%
                    </div>
                    <div class="stat-label">使用率</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-number">
                      {{ templateUsage.lastUsedTime }}
                    </div>
                    <div class="stat-label">最后使用时间</div>
                  </div>
                </div>
              </Card>
            </Col>

            <!-- 右侧：应用模板到资源 -->
            <Col :span="12">
              <Card title="应用模板到资源" :bordered="false">
                <div class="apply-resources">
                  <div v-if="availableResources.length === 0" class="empty">
                    暂无可用资源
                  </div>
                  <div v-else class="resource-items">
                    <Checkbox.Group v-model:value="selectedResources">
                      <div
                        v-for="resource in availableResources"
                        :key="resource.id"
                        class="resource-item"
                      >
                        <Checkbox :value="resource.id" />
                        <div class="resource-info">
                          <div class="resource-name">{{ resource.name }}</div>
                          <div class="resource-code">{{ resource.code }}</div>
                          <div class="resource-location">
                            {{ resource.location }}
                          </div>
                        </div>
                      </div>
                    </Checkbox.Group>
                  </div>
                  <div class="apply-actions">
                    <Button
                      type="primary"
                      :disabled="selectedResources.length === 0"
                      @click="applyTemplateToSelectedResources"
                    >
                      应用模板
                    </Button>
                  </div>
                </div>
              </Card>
            </Col>
          </Row>
        </div>
      </Modal>

      <!-- 模板使用指南模态框 -->
      <TemplateUsageGuide v-model:visible="templateGuideVisible" />
    </Page>
  </div>
</template>

<style scoped>
.resource-templates {
  padding: 20px;
}

.table-toolbar {
  margin-bottom: 16px;
}

/* 快速提示样式 */
.quick-tips {
  padding: 16px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
  border-radius: 8px;
  border: 1px solid #bae7ff;
}

.tips-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tips-icon {
  color: #1890ff;
  font-size: 20px;
  margin-right: 8px;
}

.tips-title {
  font-size: 16px;
  font-weight: 500;
  color: #1890ff;
  flex: 1;
}

.tips-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tip-brief {
  flex: 1;
  color: #262626;
  line-height: 1.6;
}

.tip-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.form-help {
  margin-bottom: 16px;
}

.field-help {
  margin-top: 4px;
  color: #666;
  font-size: 12px;
  line-height: 1.4;
}

/* 版本管理样式 */
.version-manager {
  padding: 16px 0;
}

.version-header {
  margin-bottom: 20px;
  padding: 16px;
  background: #fafafa;
  border-radius: 6px;
}

.current-version {
  color: #1890ff;
  font-weight: 500;
}

.version-list {
  max-height: 500px;
  overflow-y: auto;
}

.version-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.version-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  background: #fafafa;
}

.version-info {
  flex: 1;
}

.version-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.version-number {
  font-size: 16px;
  font-weight: bold;
  color: #262626;
}

.version-description {
  font-weight: 500;
  color: #262626;
  margin-bottom: 4px;
}

.version-changes {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}

.version-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #8c8c8c;
}

.version-actions {
  flex-shrink: 0;
}

/* 应用管理样式 */
.apply-manager {
  padding: 16px 0;
}

.usage-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  background: #fafafa;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.apply-resources {
  max-height: 400px;
  overflow-y: auto;
}

.resource-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.resource-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  background: #fafafa;
}

.resource-info {
  flex: 1;
  margin-left: 8px;
}

.resource-name {
  font-weight: 500;
  color: #262626;
  margin-bottom: 4px;
}

.resource-code {
  font-size: 12px;
  color: #8c8c8c;
  margin-bottom: 2px;
}

.resource-location {
  font-size: 12px;
  color: #8c8c8c;
}

.apply-actions {
  text-align: center;
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
}
</style>
